import React, { lazy, Suspense } from 'react';
import { useRoutes, Navigate } from 'react-router-dom';
import type { RouteObject } from 'react-router-dom';
import { Spin } from 'antd';

// --- 路由懒加载 ---
// 使用 lazy 和 Suspense 可以让组件在需要时才加载，优化初始加载速度。

// 1. 导入页面组件
const Home = lazy(() => import('@/pages/Home'));
const ProjectConfig = lazy(() => import('@/pages/ProjectConfig'));

// 2. 定义路由加载时的 loading 效果
const loading = (
  <div className="flex justify-center items-center h-screen">
    <Spin size="large" tip="加载中..." />
  </div>
);

// 3. 定义路由配置数组
// 这种方式使得路由配置集中化，便于管理和扩展（如添加权限校验等）。
const routes: RouteObject[] = [
  {
    path: '/',
    element: <Navigate to="/project-config" replace />,
  },
  {
    path: '/project-config',
    element: <ProjectConfig />,
  },
  {
    path: '/home',
    element: <Home />,
  },
  {
    // 404 页面：当用户访问不存在的路径时，重定向到首页
    path: '*', 
    element: <Navigate to="/" replace />,
  },
];

// 4. 封装一个组件，用于渲染路由表
const AppRouter: React.FC = () => {
  // useRoutes hook 会根据当前的 URL 匹配路由表并返回对应的组件
  const element = useRoutes(routes);
  // Suspense 用于包裹懒加载的组件，在组件加载完成前显示 fallback 内容
  return <Suspense fallback={loading}>{element}</Suspense>;
};

export default AppRouter;
